{% extends './components/layout.html' %}


{% block header %}
<link rel="stylesheet" href="{{mainUrl}}stylesheets/index.css">
<link href="{{mainUrl}}stylesheets/video-js.css" rel="stylesheet">

{% endblock %}

{% block content %}

<div class="container">
    <!-- 顶部导航 -->
    {% include "components/header.html" %}
    <div class="content">
        <div class="unit1">
            <div class="words">
                <h1>拥抱绿色科技 成就美好生活</h1>
                <h3>以领先的生物技术和优质、专业的服务，为作物健康保驾护航。</h3>
                <h6>Protecting Plant Health With World Leading Biotechnologies And Professional Services</h6>
            </div>
            <div class="video-box">
                <div class="video-cover" ></div>

                <video id="my_video_only" class="video-js vjs-default-skin primary-video" style="background:none;"  preload="auto"  height="500" style=""
                       poster="" loop="true" autoplay
                       data-setup="{}">
                    <source src="http://ecoproprod.oss-cn-beijing.aliyuncs.com/banner/video.mp4" type='video/mp4' />
                    <!--<source src="http://ecoproprod.oss-cn-beijing.aliyuncs.com/banner/video.webm" type='video/webm' />-->
                    <!--<source src="http://ecoproprod.oss-cn-beijing.aliyuncs.com/banner/video.ogv" type='video/ogg' />-->
                </video>
                <script src="{{mainUrl}}javacripts/video.min.js"></script>
                <script>
                    var myPlayer = videojs('#my_video_only');
                    myPlayer.height(560);//设置高度：
                    myPlayer.play();
//                    myPlayer.ready(function () {
//                        var myPlayer = this;
////                        myPlayer.play();
////                        var howTallIsIt = myPlayer.height();//获取高度
//                        myPlayer.height(560);//设置高度：
//
//                    });
                </script>
            </div>
        </div>
        <div class="unit2">
            <div class="inner layout-width">
                <div class="text-from">
                    <h1>领先的生物防控&作物健康<br>解决方案服务商</h1>
                    <div class="icon-style"></div>
                    <p>作为国内领先的现代农业技术服务+互联网解决方案公司，宜葆农科为全国的规模化种植基地和企业提供专业的解决方案支持，为有机&绿色农业保驾护航。</p>
                </div>
            </div>
        </div>
        <div class="unit3">
            <div class="unit3-bg bg1" id="bg"></div>
            <div class="main layout-width">
                <div class="sidebar">
                    <ul class="" id="tab-hd">
                        <li class="sidebar-item hover" >
                            <a  style="border-color: rgb(51, 51, 51);">
                                <h3>全程解决方案</h3>
                                <p>为有机及绿色农业智慧赋能</p>
                            </a>
                        </li>
                        <li class="sidebar-item " >
                            <a style="border-color: rgb(51, 51, 51);">
                                <h3>微植保®</h3>
                                <p>作物健康助手和植保专家</p>
                            </a>
                        </li>
                        <li class="sidebar-item " >
                            <a style="border-color: rgb(51, 51, 51);">
                                <h3>微秸宝®</h3>
                                <p>秸秆还田堆制有机肥</p>
                            </a>
                        </li>
                        <li class="sidebar-item " >
                            <a style="border-color: rgb(51, 51, 51);">
                                <h3>有机示范县（区）创建</h3>
                                <p>提升区域品质，助力精准扶贫</p>
                            </a>
                        </li>
                        <li class="sidebar-item " >
                            <a style="border-color: rgb(51, 51, 51);">
                                <h3>农药监管平台</h3>
                                <p>有效推进“农药零增长”</p>
                            </a>
                        </li>
                    </ul>
                </div>

                <ul class="content" id="tab-bd">
                    <li class="content-item active" >
                        <div class="header-section"><h3>作物健康全程解决方案</h3>
                            <p>秉承全球先进的作物健康理念，以农业大数据为依托，解决方案涵盖农业措施、病虫害防控、 农场管理等环节，有效提升农场生产实力。</p>
                        </div>
                        <div class="solution-detail">
                            <a class="solution-link" target="_blank">服务客户</a>
                            <ul class="partners">
                                <li class="partner"></li>
                            </ul>
                        </div>
                        <div class="solution-detail">
                            <a  class="solution-link" target="_blank">投入品</a>
                            <ul class="product-intro">
                                <li class=""><a>植物源</a></li>
                                <li class=""><a>微生物源</a></li>
                                <li class=""><a style="border:0">物理防控</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="content-item " >
                        <div class="header-section"><h3>专业作物健康助手-微植保®</h3>
                            <p>提供点对点的作物防控和健康方案、投入品服务、农业资讯和农事管理服务。</p>
                        </div>
                        <div class="solution-detail">
                            <a   class="solution-link" target="_blank" >核心功能</a>
                            <ul class="product-intro">
                                <li class=""><a>病虫害自查</a></li>
                                <li class=""><a>专家诊断</a></li>
                                <li class=""><a>投入品平台</a></li>
                                <li class=""><a>微农事</a></li>
                                <li class=""><a style="border:0">微农讯</a></li>
                            </ul>
                        </div>
                        <div class="btn-group btn-type1">
                            <a href="{{mainUrl}}case/wzb" target="_blank" style="background-color: #90C320;">了解更多</a>
                            <a style="background-color: #90C320;">二维码
                                <div class="qrcode-box-wrp">
                                    <img src="{{mainUrl}}images/index/qrcode-wzb.jpg" alt="">
                                </div>
                            </a>
                        </div>
                    </li>
                    <li class="content-item " >
                        <div class="header-section"><h3>专业秸秆堆制有机肥方案-微秸宝®</h3>
                            <p>资源循环再利用、有机肥替代化肥创新实践、国家果菜茶重点推荐项目。微秸宝帮助农场轻松、自主堆制高效有机肥， 从此好肥不用买。</p>
                        </div>
                        <div class="solution-detail">
                            <a   class="solution-link" target="_blank" >核心功能</a>
                            <ul class="product-intro">
                                <li class=""><a>智能堆肥系统</a></li>
                                <li class=""><a>微秸宝App</a></li>
                                <li class=""><a>微生物发酵包</a></li>
                                <li class=""><a style="border:0">秸秆粉碎设备</a></li>
                            </ul>
                        </div>
                        <div class="btn-group btn-type2">
                            <a href="{{mainUrl}}case/wjb" target="_blank" style="background-color: #F59523;">我要堆肥</a>
                            <a style="background-color: #F59523;">二维码
                                <div class="qrcode-box-wrp">
                                        <img src="{{mainUrl}}images/index/qrcode-wjb.jpg" alt="">
                                </div>
                            </a>
                        </div>
                    </li>
                    <li class="content-item " >
                        <div class="header-section"><h3>全国有机示范区（县）创建全程技术支持</h3>
                            <p>针对农业大区提升种植品质的产业型解决方案。全国权威农业专家和技术团队坐阵，提供有机产业规划、有机种植技 术培训等全程支持。</p>
                        </div>
                        <div class="solution-detail">
                            <a   class="solution-link" target="_blank" >服务示例</a>
                            <ul class="product-intro">
                                <li class=""><a>上海市金山区</a></li>
                                <li class=""><a>江西省井冈山市</a></li>
                                <li class=""><a style="border:0">江西省瑞金市</a></li>
                            </ul>
                        </div>
                        <div class="btn-group btn-type3">
                            <a style="background-color: #6B9C33" href="{{mainUrl}}case/modelArea" target="_blank">详情咨询</a>
                        </div>
                    </li>
                    <li class="content-item " >
                        <div class="header-section"><h3>农药监管平台</h3>
                            <p>新施行的《农药管理条例》在农药销售和使用方面对地方政府农业主管部门提出更高要求。农药监管平台严格依照新条例要求设计和开发，实现农药流通和使用的全方位监管。</p>
                        </div>
                        <div class="solution-detail">
                            <a   class="solution-link" target="_blank">服务示例</a>
                            <ul class="product-intro">
                                <li class=""><a style="border:0">江西省井冈山市</a></li>
                            </ul>
                        </div>
                        <div class="btn-group btn-type4">
                            <a  style="background-color:#4394D1;" href="{{mainUrl}}case/inspection" target="_blank">详情咨询</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var tabH = document.getElementById('tab-hd');
        var Hlist = tabH.children;
        var tabB = document.getElementById('tab-bd');
        var BG = document.getElementById('bg');
        var Blist = tabB.children;

        for(var i = 0; i < Hlist.length; i++){
            (function (index) {
                Hlist[index].onmouseover = function () {
                    for(var j = 0; j < Hlist.length; j++){
                        Hlist[j].className = 'sidebar-item';
                        Blist[j].className = 'content-item';
                    }
                    BG.className = 'unit3-bg bg'+(index+1);
                    Hlist[index].className = 'content-item hover';
                    Blist[index].className = 'content-item active';
                };
            })(i);
        }

    </script>
    {% include "components/footer.html" %}
</div>

{% endblock %}

